@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./resourceNodeAnimations.css";
@layer utilities {
  .text-shadow {
    text-shadow: 0px 1px #714431;
  }
  .text-shadow-md {
    text-shadow: 0px 2px #714431;
  }
  .text-shadow-none {
    text-shadow: none;
  }
  .img-highlight {
    filter: drop-shadow(1px 1px 0px white) drop-shadow(-1px 0px 0px white)
      drop-shadow(0px -1px 0px white);
  }
  .img-highlight-heavy {
    filter: drop-shadow(2px 2px 0px white) drop-shadow(-2px 0px 0px white)
      drop-shadow(0px -2px 0px white);
  }
  .img-highlight-extra-heavy {
    filter: drop-shadow(3px 3px 0px white) drop-shadow(-3px 0px 0px white)
      drop-shadow(0px -3px 0px white);
  }
  .separate-lines {
    word-break: break-word;
  }

  /* create a horizontal line original price */
  .discounted:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 -5px;
    border-top: 1px solid #3e2731;
    z-index: 1;
  }

  .text-stroke {
    /* -webkit-text-stroke: 1px black; */
    /* text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
      -1px 1px 0 #000, 1px 1px 0 #000;
    letter-spacing: 0.4px; */
  }

  .img-shadow {
    filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.2));
  }
  /* Safe Areas Mobile */
  .inset-safe-area {
    top: env(safe-area-inset-top);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
  }
  .inset-b-safe-area {
    bottom: env(safe-area-inset-bottom);
  }
  .inset-t-safe-area {
    top: env(safe-area-inset-top);
  }
  .inset-l-safe-area {
    left: env(safe-area-inset-left);
  }
  .inset-r-safe-area {
    right: env(safe-area-inset-right);
  }
  .safe-pt {
    padding-top: env(safe-area-inset-top);
  }
  .safe-pb {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .safe-pl {
    padding-left: env(safe-area-inset-left);
  }
  .safe-pr {
    padding-right: env(safe-area-inset-right);
  }
  .safe-mt {
    margin-top: env(safe-area-inset-top);
  }
  .safe-mb {
    margin-bottom: env(safe-area-inset-bottom);
  }
  .safe-ml {
    margin-left: env(safe-area-inset-left);
  }
  .safe-mr {
    margin-right: env(safe-area-inset-right);
  }
  .safe-py {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .safe-px {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .safe-my {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }
  .safe-mx {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
  }
}

:root {
  --font-family: "Basic", "Ark", sans-serif;

  /* Font Size Variables */
  --text-xxs-size: 20px;
  --text-xxs-line-height: 12px;

  --text-xs-size: 24px;
  --text-xs-line-height: 14px;

  --text-sm-size: 30px;
  --text-sm-line-height: 20px;

  --text-base-size: 36px;
  --text-base-line-height: 26px;

  --text-lg-size: 42px;
  /* Assuming line-height for lg is the default line-height */
}

.text-xxs {
  font-size: var(--text-xxs-size);
  line-height: var(--text-xxs-line-height);
}

.text-xs {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line-height);
}

.text-sm {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
}

.text-base {
  font-size: var(--text-base-size);
  line-height: var(--text-base-line-height);
}

.text-lg {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line-height);
}

@font-face {
  font-family: "Teeny";
  src: url("https://sunflower-land.com/testnet-assets/fonts/Teeny.otf");
}

@font-face {
  font-family: "Basic";
  src: url("https://sunflower-land.com/testnet-assets/fonts/Hint.ttf");
}

@font-face {
  font-family: "Secondary";
  src: url("https://sunflower-land.com/testnet-assets/fonts/Secondary.ttf");
}

@font-face {
  font-family: "Born2bSporty";
  src: url("https://sunflower-land.com/testnet-assets/fonts/Born2bSportyFS.otf");
}

@font-face {
  font-family: "Basis33";
  src: url("https://sunflower-land.com/testnet-assets/fonts/basis33.ttf");
}

@font-face {
  font-family: "Ark";
  src: url("https://sunflower-land.com/testnet-assets/fonts/ark-pixel-zh_cn.ttf");
}

html {
  min-height: calc(100% + env(safe-area-inset-top));
}

body {
  /* font-family: "Basic", sans-serif, "LXGW WenKai TC", cursive; */
  font-family: var(--font-family);
  overflow: hidden;
  color: #181425;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
  -webkit-font-smoothing: antialiased;
}

body,
button,
input {
  /* text-shadow: 0px 1.4px #714431; */
  color: #3e2731;
}

button:disabled {
  cursor: not-allowed;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

#walletconnect-wrapper {
  all: initial;
}

* {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*
        Introduced in Internet Explorer 10
        See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
      */
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Disable html number input arrows  */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input {
  background: #ead4aa !important;
}

input[type="number"] {
  -moz-appearance: textfield;
  /* Enable user-select, for ios(Safari) compatibility */
  -webkit-user-select: auto;
  user-select: auto;
}

img {
  image-rendering: pixelated;
}

@keyframes marquee-like-effect {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes ellipsis {
  to {
    transform: translateY(-6em);
  }
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulsating {
  animation: pulsate 1s infinite;
}

.two-line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@keyframes blink {
  0%,
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.no-tadpoles {
  height: 2.25rem;
}

.npc-shadow::after {
  content: "";
  height: 14px;
  width: 28px;
  border-radius: 50%;
  background: #32323273;
  position: absolute;
  z-index: 0;
  bottom: -43px;
  left: 7px;
}

/* Custom scrollbar for item modal */

.lg-modal {
  max-width: 80%;
}
.scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.scrollable::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border: 2.625px solid black;
  border-radius: 5px;
}

.scrollable::-webkit-scrollbar-thumb {
  border-radius: 5px;
  border: 2.625px solid black;
  background-color: #eea368;
}

/* Hide scrollbar clsas or webkit-based browsers (Chrome, Safari and Opera) */

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.running {
  animation-duration: 10s;
  animation-name: running;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}

@keyframes running {
  0% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: linear;
  }
  49% {
    transform: translateX(200px) scaleX(1);
    animation-timing-function: linear;
  }
  50% {
    transform: translateX(200px) scaleX(-1);
    animation-timing-function: linear;
  }
  100% {
    transform: translateX(0) scaleX(-1);
    animation-timing-function: linear;
  }
}

.boating {
  animation-duration: 100s;
  animation-name: boating;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}

@keyframes boating {
  0% {
    transform: translateX(-850px);
    animation-timing-function: linear;
  }
  100% {
    transform: translateX(1800px);
    animation-timing-function: linear;
  }
}

.swimming {
  animation-duration: 10s;
  animation-name: swimming;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}

@keyframes swimming {
  0% {
    transform: translateX(0);
    animation-timing-function: linear;
  }
  100% {
    transform: translateX(300px);
    animation-timing-function: linear;
  }
}

.pointing {
  animation-duration: 3s;
  animation-name: pointing;
  animation-iteration-count: infinite;
  transition-timing-function: ease;
}

.coins-bb-hud-backdrop {
  height: 19px;
  width: 95%;
  left: -1px;
  top: 6px;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 22%
  );
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 22%);
  z-index: -1;
}

.balance-text {
  color: white;
  /* text-shadow: 1px 1px black; */
  font-family: "Secondary";
  /* paint-order: stroke;
  -webkit-text-stroke: 3px black; */
  letter-spacing: 1px;
  font-size: 28px !important;

  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black,
    -2px 0 0 black,
    2px 0 0 black,
    0 -2px 0 black,
    0 2px 0 black,
    -2px -2px 0 black,
    2px -2px 0 black,
    -2px 2px 0 black,
    2px 2px 0 black;
}

.map-text {
  color: white;
  /* text-shadow: 1px 1px black; */
  font-family: "Secondary";
  /* paint-order: stroke;
  -webkit-text-stroke: 3px black; */
  letter-spacing: 1px;

  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black,
    -2px 0 0 black,
    2px 0 0 black,
    0 -2px 0 black,
    0 2px 0 black,
    -2px -2px 0 black,
    2px -2px 0 black,
    -2px 2px 0 black,
    2px 2px 0 black;
}

.yield-text {
  color: white;
  /* text-shadow: 1px 1px black; */
  font-family: Teeny;
  font-size: 12px !important;
  /* paint-order: stroke;
  -webkit-text-stroke: 3px black; */
  letter-spacing: 1px;

  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black,
    -2px 0 0 black,
    2px 0 0 black,
    0 -2px 0 black,
    0 2px 0 black,
    -2px -2px 0 black,
    2px -2px 0 black,
    -2px 2px 0 black,
    2px 2px 0 black;
}

.sfl-hud-backdrop {
  height: 21px;
  width: 88%;
  left: -1px;
  top: 3px;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 22%
  );
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 22%);
  z-index: -1;
}

@keyframes pointing {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

.launching {
  animation-duration: 8s;
  animation-name: launching;
  transition-timing-function: ease-out;
}

@keyframes launching {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1700px);
  }
}

.cave {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.bulge-repeat {
  animation: bulgeRepeat 1200ms steps(16, jump-none) infinite;
}

@keyframes bulgeRepeat {
  0% {
    transform: scale(1);
  }
  12.5% {
    transform: scale(1.15, 0.9);
  }
  25%,
  100% {
    transform: scale(1);
  }
}

.flip {
  animation: flipping 2s linear infinite;
}

@keyframes flipping {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.bulge {
  animation: bulge 300ms steps(4, jump-none);
}

@keyframes bulge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15, 0.9);
  }
  100% {
    transform: scale(1);
  }
}

.ready {
  animation: ready-shake 4s ease infinite;
  transform-origin: 50% 50%;
}

.shake {
  animation: ready-shake 1s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes ready-shake {
  0% {
    transform: translate(0, 0);
  }
  2% {
    transform: translate(2.625px, 0);
  }
  4% {
    transform: translate(-2.625px, 0);
  }
  6% {
    transform: translate(2.625px, 0);
  }
  8% {
    transform: translate(-2.625px, 0);
  }
  10% {
    transform: translate(2.625px, 0);
  }
  12% {
    transform: translate(-2.625px, 0);
  }
  14% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.treasure-reward,
.mushroom {
  animation: rise-up 750ms ease;
  animation-fill-mode: both;
  transform-origin: bottom center;
}

@keyframes rise-up {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.4, 0.6);
  }
  100% {
    transform: scale(1);
  }
}

.scaling {
  transition: scaler 1s ease-in-out;
}

@keyframes scaler {
  0% {
    transforms: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 1s infinite;
}

.warn-pulse {
  animation: subtle-pulse 1s infinite;
}

.npc-loading {
  animation: subtle-pulse 2s infinite;
}

@keyframes subtle-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.blur-to-focus {
  animation: blurToFocus 3s linear;
}

@keyframes blurToFocus {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}

.paper-floating {
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--animation-order) * 250ms);
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 6px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

.honey-production-gradient {
  background: rgb(190, 74, 47);
  background: linear-gradient(
    90deg,
    rgb(190, 74, 47) 8%,
    rgb(247, 118, 34) 33%,
    rgb(254, 174, 52) 70%,
    rgb(254, 231, 97) 100%
  );
}

.npc-dialog {
  position: absolute;
  bottom: 0;
  width: 66%;
  left: 17.5%;
}

/* Expanding Full Screen Panel */
#expanding-base {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s;
}

#expanding-container {
  /* display: none; */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100vw;
  height: 100vh;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  z-index: 9999;
  transition: transform 0.5s;
  /* max-width: 448px; */
  margin: 0 auto;
}

#cover {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://sunflower-land.com/testnet-assets/ui/brown_wall.webp");
  background-repeat: repeat;
  background-size: calc(22px * 2.625);
  /* background-position: 50% 0; */
  opacity: 0.2;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

.bombed-potion-guess {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 5s;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.skew-animation {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
  transform-origin: 50% 50%;
  animation-name: skeOne;
}

@keyframes skeOne {
  0% {
    transform: skew(0);
    opacity: 0.5;
  }
  100% {
    transform: skewX(7deg);
    opacity: 1;
  }
}

.fish-swimming {
  animation-duration: 10s;
  animation-name: swimming;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}

@keyframes swimming {
  0% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: linear;
    opacity: 0.8;
  }
  49% {
    transform: translateX(50px) scaleX(1);
    animation-timing-function: linear;
    opacity: 0.1;
  }
  50% {
    transform: translateX(50px) scaleX(-1);
    animation-timing-function: linear;
    opacity: 0.1;
  }
  100% {
    transform: translateX(0) scaleX(-1);
    animation-timing-function: linear;
    opacity: 0.8;
  }
}

.silhouette {
  filter: brightness(0) saturate(100%) invert(5%) sepia(21%) saturate(2001%)
    hue-rotate(215deg) brightness(99%) contrast(93%);
}

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

.snowflake,
.snowflake .inner {
  animation-iteration-count: infinite;
  animation-play-state: running;
}
@keyframes snowflakes-fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(110vh);
  }
}
@keyframes snowflakes-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(80px);
  }
}
.snowflake {
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  animation-name: snowflakes-shake;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}
.snowflake .inner {
  animation-duration: 10s;
  animation-name: snowflakes-fall;
  animation-timing-function: linear;
}
.snowflake:nth-of-type(0) {
  left: 1%;
  animation-delay: 0s;
}
.snowflake:nth-of-type(0) .inner {
  animation-delay: 0s;
}
.snowflake:first-of-type {
  left: 10%;
  animation-delay: 1s;
}
.snowflake:first-of-type .inner,
.snowflake:nth-of-type(8) .inner {
  animation-delay: 1s;
}
.snowflake:nth-of-type(2) {
  left: 20%;
  animation-delay: 0.5s;
}
.snowflake:nth-of-type(2) .inner,
.snowflake:nth-of-type(6) .inner {
  animation-delay: 6s;
}
.snowflake:nth-of-type(3) {
  left: 30%;
  animation-delay: 2s;
}
.snowflake:nth-of-type(11) .inner,
.snowflake:nth-of-type(3) .inner {
  animation-delay: 4s;
}
.snowflake:nth-of-type(4) {
  left: 40%;
  animation-delay: 2s;
}
.snowflake:nth-of-type(10) .inner,
.snowflake:nth-of-type(4) .inner {
  animation-delay: 2s;
}
.snowflake:nth-of-type(5) {
  left: 50%;
  animation-delay: 3s;
}
.snowflake:nth-of-type(5) .inner {
  animation-delay: 8s;
}
.snowflake:nth-of-type(6) {
  left: 60%;
  animation-delay: 2s;
}
.snowflake:nth-of-type(7) {
  left: 70%;
  animation-delay: 1s;
}
.snowflake:nth-of-type(7) .inner {
  animation-delay: 2.5s;
}
.snowflake:nth-of-type(8) {
  left: 80%;
  animation-delay: 0s;
}
.snowflake:nth-of-type(9) {
  left: 90%;
  animation-delay: 1.5s;
}
.snowflake:nth-of-type(9) .inner {
  animation-delay: 3s;
}
.snowflake:nth-of-type(10) {
  left: 25%;
  animation-delay: 0s;
}
.snowflake:nth-of-type(11) {
  left: 65%;
  animation-delay: 2.5s;
}

.bee-flight {
  animation: floating 750ms infinite;
}

@keyframes enter-hive {
  0% {
    transform: translate(-50%, 0) scale(1);
    transform-origin: center center;
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -9px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  90% {
    transform: translate(-50%, -7px) scale(0);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -7px) scale(0);
    transform-origin: center bottom;
    opacity: 0;
  }
}

@keyframes exit-hive {
  0% {
    transform: translate(-50%, -7px) scale(0);
    transform-origin: center bottom;
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -7px) scale(0);
    transform-origin: center bottom;
    opacity: 1;
  }
  90% {
    transform: translate(-50%, -8px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0) scale(1);
    transform-origin: center center;
    opacity: 1;
  }
}

.animate-enter-hive {
  animation: enter-hive 1.5s ease-out;
  animation-fill-mode: forwards;
}

.animate-exit-hive {
  animation: exit-hive 1.5s ease-in;
  animation-fill-mode: forwards;
}

@keyframes honey-drop {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

.honey-drop-ready {
  animation: honey-drop 1s infinite;
  animation-delay: 1.5s;
}

@keyframes fly-up-right {
  0% {
    transform: translate(0, -5px) scale(0) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(0, -15px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
}

@keyframes fly-up-left {
  0% {
    transform: translate(0, -5px) scale(0);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(0, -15px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
}

/* Bee Swarm of 5 bees coming out of the hive and flying in different directions and then fading out */
@keyframes bee-1 {
  0% {
    transform: translate(0, -7px) scale(0) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  15% {
    transform: translate(0, -15px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(5px, 150px) scale(1) scaleX(-1);
    transform-origin: center center;
    opacity: 0;
  }
}

/* Bee 2 should fly towards a 60 deg angle */
@keyframes bee-2 {
  0% {
    transform: translate(0, -16px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(40px, 160px) scale(1) scaleX(-1);
    transform-origin: center center;
    opacity: 0;
  }
}

@keyframes bee-3 {
  0% {
    transform: translate(0, -8px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  10% {
    transform: translate(0, -20px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(60px, 140px) scale(1) scaleX(-1);
    transform-origin: center center;
    opacity: 0;
  }
}

@keyframes bee-4 {
  0% {
    transform: translate(-10px, -8px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  10% {
    transform: translate(-12px, -15px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(-40px, 175px) scale(1);
    transform-origin: center center;
    opacity: 0;
  }
}

@keyframes bee-5 {
  0% {
    transform: translate(-30px, -8px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  10% {
    transform: translate(-32px, -15px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(-70px, 90px) scale(1);
    transform-origin: center center;
    opacity: 0;
  }
}

@keyframes bee-6 {
  0% {
    transform: translate(-20px, -20px) scale(1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(-70px, 80px) scale(1);
    transform-origin: center center;
    opacity: 0;
  }
}

@keyframes bee-7 {
  0% {
    transform: translate(5px, -8px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  15% {
    transform: translate(8px, -14px) scale(1) scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  100% {
    transform: translate(50px, 60px) scale(1) scaleX(-1);
    transform-origin: center center;
    opacity: 0;
  }
}

.swarm-bee-1 {
  animation:
    fly-up-right 4s,
    bee-1 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.swarm-bee-2 {
  animation:
    fly-up-right 4s,
    bee-2 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.swarm-bee-3 {
  animation:
    fly-up-right 4s,
    bee-3 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.swarm-bee-4 {
  animation:
    fly-up-left 4s,
    bee-4 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.swarm-bee-5 {
  animation:
    fly-up-left 4s,
    bee-5 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.swarm-bee-6 {
  animation:
    fly-up-left 4s,
    bee-6 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.swarm-bee-7 {
  animation:
    fly-up-right 3s,
    bee-7 3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.36, 0.03, 0.18, 1.08);
}
.clouds {
  animation-duration: 10s;
  animation-name: clouds;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}

@keyframes clouds {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(10px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

a {
  color: #3e2731;
}

.font-secondary {
  -webkit-font-smoothing: antialiased;
  word-spacing: -2px;
}

.font-pixel {
  font-size: 22px;
  -webkit-font-smoothing: antialiased;
}

.font-Ark {
  font-family: "Ark", sans-serif;
  font-size: 14px;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
}

th {
  font-weight: normal;
}

.loading::after {
  display: inline-block;
  animation: dotty steps(1, end) 1s infinite;
  content: "";
  min-width: 0.6rem;
  text-align: left;
}

@keyframes dotty {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
